<template>
  <div class="banner">
      <div class="item">
          <img :src="imgArray[currentIndex]" />
      </div>
      <div class="page" v-if="this.imgArray.length > 1">
          <ul>
            <li @click="goPage(preIndex)">&lt;</li>
            <li v-for="(item,index) in imgArray" @click="goPage(index)" :class="{'current': currentIndex == index}" :key="index">{{index+1}}</li>
            <li @click="goPage(nextIndex)">&gt;</li>
          </ul>
      </div>
  </div>
</template>

<script>
//Sun Dec 5 17:27:37 CST 2021
//slide 轮播图
export default {
  name: '',
  data () {
    return {
      imgArray:[require('../../src/assets/0ar4mfkzqgs.jpg'),require('../../src/assets/00lnnkt5y4o.jpg'),require('../../src/assets/0ae683d340afc94b61c10cdc5a0aac07.jpg')],
      currentIndex:0,
      timer:null
    }
  },
  methods: {
      goPage(index){
          this.currentIndex=index;
      }
  },
  mounted () {
    //  this.timer = setInterval(()=>{
    //      this.goPage(this.nextIndex);
    //  },1500)
  },
  computed:{
      preIndex(){
         if(this.currentIndex == 0){
             return this.imgArray.length-1;
         }else{
             return this.currentIndex-1;
         }
      },
      nextIndex(){
         if(this.currentIndex == this.imgArray.length-1){
             return  0
         }else{
             return this.currentIndex+1;
         }
      }
  }
}
</script>

<style>
   * {
        margin: 0;
        padding: 0;
    }
    ul li {
        list-style: none;
        float: left;
        width: 30px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        color: rgba(255,255,255,.8);
        font-size: 14px;
    }
    .banner {
        max-width: 1200px;
        height: 500px;
        border: 1px solid red;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        margin-top: 60px;
    }
    .banner img {
        width: 100%;
        display: block;
    }
    .banner .page {
        background: rgba(0,0,0,.5);
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
    }
    .banner .page ul {
        float: right;
    }
    .current {
        color: #ff6700;
    }
</style>
